<template>
  <div class="h-120">
    <div class="mx-4 mt-20 mb-10 px-40">
      <el-card>
        <el-avatar :src="userInfo.avatar" />
        <el-descriptions class="margin-top" :title="userInfo.nickname" :column="3" border>
          <template #extra>
            <el-button @click="dialogUserInfoVisible = true" type="primary">修改个人信息</el-button>
            <el-button @click="dialogPasswordVisible = true" type="primary">修改密码</el-button>
            <el-button @click="show = true" type="primary">修改头像</el-button>
          </template>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <user />
                </el-icon>
                用户名
              </div>
            </template>
            {{ userInfo.nickname }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <iphone />
                </el-icon>
                电话号码
              </div>
            </template>
            {{ userInfo.mobile }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <svg t="1683015057845" class="icon" viewBox="0 0 1025 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2684" width="200" height="200">
                    <path
                      d="M347.093333 345.6 619.754667 72.96l0 206.656c0 11.776 9.557333 21.354667 21.376 21.354667 11.797333 0 21.376-9.578667 21.376-21.376L662.506667 0l-21.248 0c-0.085333 0-0.170667 0-0.256 0L382.890667 0c-11.797333 0-21.376 9.557333-21.354667 21.376 0 11.776 9.557333 21.354667 21.354667 21.354667l206.634667 0L316.138667 316.138667c-0.661333 0.661333-0.917333 1.514667-1.472 2.218667-32.192-21.653333-70.912-34.325333-112.533333-34.325333C90.666667 284.032 0 374.72 0 486.165333c0 111.466667 90.666667 202.176 202.133333 202.176 111.445333 0 202.112-90.709333 202.133333-202.176C404.266667 431.552 382.4 382.016 347.093333 345.6zM202.133333 645.589333c-87.872 0-159.402667-71.530667-159.402667-159.424 0-87.872 71.530667-159.381333 159.402667-159.381333s159.381333 71.509333 159.402667 159.381333C361.536 574.058667 290.005333 645.589333 202.133333 645.589333z"
                      p-id="2685" fill="#606266"></path>
                    <path
                      d="M821.866667 361.514667c-111.466667 0-202.154667 90.688-202.154667 202.133333 0 48.042667 16.917333 92.181333 45.034667 126.912l-165.674667 165.674667-101.098667-101.098667c-8.362667-8.384-21.845333-8.384-30.208 0-8.362667 8.362667-8.362667 21.845333 0 30.208l101.098667 101.098667L367.786667 987.52c-8.362667 8.362667-8.362667 21.845333 0 30.229333C371.946667 1021.909333 377.408 1024 382.890667 1024c5.461333 0 10.922667-2.090667 15.104-6.250667l101.098667-101.098667 101.098667 101.098667C604.352 1021.909333 609.813333 1024 615.296 1024c5.461333 0 10.922667-2.090667 15.104-6.250667 8.362667-8.384 8.362667-21.866667 0-30.229333l-101.077333-101.077333 165.674667-165.674667c34.730667 28.096 78.848 45.013333 126.890667 45.013333 111.445333 0 202.133333-90.709333 202.133333-202.154667S933.312 361.514667 821.866667 361.514667zM821.866667 723.050667c-87.872 0-159.424-71.552-159.424-159.402667 0-87.872 71.552-159.402667 159.424-159.402667s159.402667 71.530667 159.402667 159.402667C981.269333 651.498667 909.76 723.050667 821.866667 723.050667z"
                      p-id="2686" fill="#606266"></path>
                  </svg>
                </el-icon>
                性别
              </div>
            </template>
            {{ userInfo.sex === 1 ? '女' : '男' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets />
                </el-icon>
                年龄
              </div>
            </template>
            <el-tag size="small">{{ userInfo.age }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
        <div>
        </div>
      </el-card>
      <ClientOnly>
        <el-dialog title="修改密码" v-model="dialogPasswordVisible">
          <el-form ref="ruleFormRef" :rules="rules" :model="passwordForm">
            <el-form-item label="旧密码" :label-width="formLabelWidth" prop="oldPassword">
              <el-input v-model="passwordForm.oldPassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码" :label-width="formLabelWidth" prop="newPassword">
              <el-input v-model="passwordForm.newPassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" :label-width="formLabelWidth" prop="newPassword2">
              <el-input v-model="passwordForm.newPassword2" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogPasswordVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitModifyPassword(ruleFormRef)">确 定</el-button>
          </div>
        </el-dialog>
      </ClientOnly>

      <ClientOnly>
        <el-dialog title="修改基本信息" width="40%" v-model="dialogUserInfoVisible">
          <el-form ref="ruleFormRef2" :rules="rules2" :model="userInfo">
            <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickname">
              <el-input v-model="userInfo.nickname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
              <el-radio-group v-model="userInfo.sex">
                <el-radio :label="2">男</el-radio>
                <el-radio :label="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
              <el-input-number v-model="userInfo.age" autocomplete="off" :min="0" :max="100"></el-input-number>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogUserInfoVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitModifyUserInfo(ruleFormRef2)">确 定</el-button>
          </div>
        </el-dialog>
      </ClientOnly>
      <ClientOnly>
        <myUpload v-model="show" field="file" :headers="token" url="http://localhost:8080/user/avatar"
          @crop-upload-fail="uploadFail" @crop-upload-success="uploadSuccess">
        </myUpload>
      </ClientOnly>
    </div>
  </div>
</template>

<script setup lang="ts">
import myUpload from 'vue-image-crop-upload'
import type { FormInstance, FormRules } from 'element-plus'
import {
  Iphone,
  Location,
  Tickets,
  User,
} from '@element-plus/icons-vue'

import { ResOptions, UserInfo } from '~~/types/types'
definePageMeta({
  middleware: 'course'
})
const { public: { apiBase } } = useRuntimeConfig()
const userStore = useUserStore()
const { data } = await useFetch(`${apiBase}user/userAllInfo`, {
  // @ts-ignore
  pick: ['result'],
  headers: {
    Authorization: userStore.getToken,
    LoginType: 'User'
  }
})
const userInfo = (data.value as ResOptions<UserInfo>).result?.userInfo
const formLabelWidth = '120px'
const dialogUserInfoVisible = ref(false)
const dialogPasswordVisible = ref(false)
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  newPassword2: ''
})
const token = { Authorization: userStore.getToken }
const ruleFormRef = ref<FormInstance>()
const ruleFormRef2 = ref<FormInstance>()
const validatePassword = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== passwordForm.newPassword) {
    callback(new Error("两次密码输入不一致"))
  } else {
    callback()
  }
}
const rules = reactive<FormRules>({
  oldPassword: [
    {
      required: true,
      trigger: ['change', 'blur'],
      message: '请输入密码',
    },
  ],
  newPassword: [
    { required: true, trigger: 'change', message: '请确认密码' },
  ],
  newPassword2: [{ validator: validatePassword, trigger: 'change' }],
})
const rules2 = reactive<FormRules>({
  nickname: [
    { required: true, trigger: 'change', message: '请输入用户名' },
  ]
})
const show = ref(false)
const uploadSuccess = (jsonData: any, _field: any) => {
  console.log(jsonData);
  ElMessage.success('修改成功')
  userStore.userInfo.avatar = jsonData.result.url
  userInfo.avatar = userStore.getAvatar
}
const uploadFail = (status: any, field: any) => {
  ElMessage.error('上传失败' + status + field)
}
const submitModifyUserInfo = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      http.put('user/userInfo', userInfo)
        .then(() => {
          ElMessage.success('修改成功')
        })
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const submitModifyPassword = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      http.post('user/password', passwordForm)
        .then(() => { ElMessage.success('修改成功') })
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const iconStyle = { marginRight: '6px' }


</script>

<style scoped></style>